<template>
  <div class="me" ref="homePage">
    <div class="top">
      <img :src="AvatarUrl" />
      <div class="name" v-if="dengl == undefined">
        <span class="dengl" @click="denglv">登录/注册</span>
      </div>
      <div class="name" v-else>
        <span>{{ dianhua }}</span>
        <p>积分 {{ datalist.Points }}</p>
      </div>
    </div>
    <div class="orders-box">
      <div class="text-box">
        <span>我的订单</span>
        <span @click="orderlist(0)" style="display: flex;align-items: center;color: #666;font-weight: 400;font-size: 12px;">查看更多订单
          <van-icon color="#666" size="15px" name="arrow" /></span>
      </div>
      <div class="order-types">
        <van-tabbar>
          <van-tabbar-item :info="info" @click="orderlist(1)">
            <span>待付款</span>
            <img slot="icon" src="../assets/img/daifu.jpg" />
          </van-tabbar-item>
          <van-tabbar-item :info="info" @click="orderlist(4)">
            <span>已付款</span>
            <img slot="icon" src="../assets/img/yifu.jpg" />
          </van-tabbar-item>
          <van-tabbar-item :info="info" @click="orderlist(5)">
            <span>已完成</span>
            <img slot="icon" src="../assets/img/wancheng.jpg" />
          </van-tabbar-item>
          <van-tabbar-item :info="info" @click="orderlist(6)">
            <span>退款/售后</span>
            <img slot="icon" src="../assets/img/tuihuo.jpg" />
          </van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
    <div style="margin-top: 3.125rem;height: auto;" class="orders-box">
      <div class="text-box">
        <span>我的订单</span>
      </div>
      <div class="infos">
        <div class="order_img" @click="Jumpdata()">
          <img width="45%" src="../assets/me/1.png" />
        </div>
        <div class="order_img" @click="JumpaddressList()">
          <img width="45%" src="../assets/me/2.png" />
        </div>
        <div class="order_img" @click="JumplinkMan()">
          <img width="58%" src="../assets/me/3.png" />
        </div>
        <div class="order_img" @click="Jumpintegral()">
          <img width="45%" src="../assets/me/4.png" />
        </div>
        <!-- <div class="order_img" @click="JumpCoupon()">
          <img width="41%" src="../assets/me/5.png" />
        </div> -->
        <!-- <div class="order_img" @click="Meraiders()">
          <img width="45%" src="../assets/me/7.png" />
        </div> 我的攻略，目前不需要-->
        <div class="order_img" @click="Jumpfavorite()">
          <img width="36%" src="../assets/me/6.png" />
        </div>
        <div class="order_img" @click="complaint()">
          <img width="45%" src="../assets/me/8.png" />
        </div>
        <div class="order_img" @click="income()">
          <img width="45%" src="../assets/me/9.png" />
        </div>
        <div class="order_img" @click="identification()">
          <img width="45%" src="../assets/me/10.png" />
        </div>
        <div v-if="!isWeixin" class="order_img" @click="loginOut()">
          <img width="45%" src="../assets/me/11.png" />
        </div>
      </div>
    </div>
    <v-min></v-min>
  </div>
</template>

<script>
import min from "@/views/Min.vue";

import { getToken, removeToken } from "@/utils";
import Cookies from "js-cookie";
import { getUserInfoByToken } from "@/api/home.js";
export default {
  components: {
    "v-min": min
  },
  data () {
    return {
      clintHeigth: "", // 获取页面高度
      info: "",
      datalist: [],
      Mobile: "",
      dianhua: "",
      // dengl: getToken("token"),
      dengl: "cGnguo%2FUPGfBzpM8SJAVIobTBmnaHGF%2Fhc1oDRkM5teevawTZQpkQOctxdHNPmuF%23%2F",
      AvatarUrl: "http://192.168.1.227:823/public/statics/img/default.jpg", // 头像
      isWeixin: false
    };
  },
  created () {
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    if (isWeixin) {
      this.isWeixin = true
    } else {
      this.isWeixin = false
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}`; // document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.minHeight = this.clientHeight + "px";
    this.getUserInfoByToken();
    // console.log(getToken('token'))
    setTimeout(() => {
      this.Mobiledata();
      // console.log(1)
    }, 1000);
  },
  methods: {
    loginOut () {
      removeToken();

      // this.$router.push({
      //   path: '/'
      // })
      Cookies.set("token", "", { path: "" }); // 设置7天过期
      this.$toast({
        message: "已经退出登录"
      });

      setTimeout(() => {
        window.location.reload();
      }, 2000);
    },
    Mobiledata () {
      let telVal = this.Mobile;
      let newTelVal = "";
      if (telVal.length > 0) {
        for (var i = 0; i < telVal.length; i++) {
          if (i < 3 || i >= telVal.length - 3) {
            newTelVal += telVal[i];
          } else {
            newTelVal += "*";
          }
        }
      }
      this.dianhua = newTelVal;
    },
    orderlist (id) {
      // 订单详情
      this.$router.push({
        path: "/User/orderlist",
        query: {
          id: id
        }
      });
    },
    denglv () {
      this.$router.push({
        path: "/Login/Phonelogin"
      });
    },
    // Jumprefun() {
    //   this.$router.push({
    //     path: "/Me/RefundList",
    //     query: {
    //       // type: type,
    //     }
    //   })
    // },
    Jumpdata () {
      // 我的资料
      this.$router.push({
        path: "/Me/profile"
      });
    },
    Jumpintegral () {
      // 跳转积分
      this.$router.push({
        path: "/Me/ScoreList"
      });
    },
    JumpaddressList () {
      // 跳转收货地址
      this.$router.push({
        path: "/Me/AddressList"
      });
    },
    JumplinkMan () {
      // 跳转常用联系人
      this.$router.push({
        path: "/Me/linkMan"
      });
    },
    Jumpfavorite () {
      // 跳转常用联系人
      this.$router.push({
        path: "/Me/favorite"
      });
    },
    JumpCoupon () {
      // 跳转常用联系人
      this.$router.push({
        path: "/Me/Coupon"
      });
    },
    Meraiders () {
      // 我的攻略
      this.$router.push({
        path: "/Raiders/Meraiders"
      });
    },
    complaint () {
      // 我的投诉
      this.$router.push({
        path: "/complaint/Onlinecomplaint"
      });
    },
    income () {
      // 我的收益
      this.$router.push({
        path: "/income/Income"
      });
    },
    identification () {
      // 身份认证
      this.$router.push({
        path: "/Authentication/Authentication"
      });
    },
    getUserInfoByToken () {
      let data = {};
      let ua = navigator.userAgent.toLowerCase();
      // const isWeixin = ua.indexOf('micromessenger') != -1;
      const isWeixin = true;
      if (isWeixin) {
        data = {
          from: 'weixin',
          isMe: 1,
        }
        getUserInfoByToken(data).then(res => {
          // Cookies.set('token', "cGnguo%2FUPGfBzpM8SJAVIobTBmnaHGF%2Fhc1oDRkM5teevawTZQpkQOctxdHNPmuF%23%2F", { expires: 7, path: '' })// 设置7天过期
          console.log(res)
          if (res.Code === 0) {
            this.AvatarUrl = res.Item.AvatarUrl;
            this.datalist = res.Item;
            this.Mobile = res.Item.Mobile;
          }
        });
      } else {
        getUserInfoByToken(data).then(res => {
          // Cookies.set('token', "cGnguo%2FUPGfBzpM8SJAVIobTBmnaHGF%2Fhc1oDRkM5teevawTZQpkQOctxdHNPmuF%23%2F", { expires: 7, path: '' })// 设置7天过期
          if (res.Code === 0) {
            this.AvatarUrl = res.Item.AvatarUrl;
            this.datalist = res.Item;
            this.Mobile = res.Item.Mobile;
          } else {
            this.dengl = undefined;
            Cookies.set("token", "", {
              expires: 7,
              path: "/"
            }); // 设置7天过期
          }
        });
      }
    }
  }
};
</script>

<style lang="scss">
.me {
  background: #ffffff;

  .top {
    width: 100%;
    height: 150px;
    background: #46d0ca;
    display: flex;
    align-items: center;
    background: url(../assets/1.jpg) no-repeat;
    background-size: 100%;

    img {
      width: 50px;
      height: 50px;
      border-radius: 30px;
      overflow: hidden;
      margin-left: 15px;
    }

    .name {
      width: 84%;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      align-items: center;

      span {
        // font-size: 1rem;
        color: white;
        margin-left: 0.625rem;
        line-height: 1.875rem;
      }

      .dengl {
        width: 80px;
        height: 30px;
        // background: #7ededa;
        line-height: 30px;
        text-align: center;
      }

      p {
        width: 80px;
        height: 30px;
        background: #7ededa;
        line-height: 30px;
        text-align: center;
        color: white;
        border-bottom-left-radius: 15px;
        border-top-left-radius: 15px;
      }
    }
  }

  .orders-box {
    margin: 0 1.25rem;
    background: #ffffff;
    margin-top: -1.25rem;
    border-radius: 0.875rem;
    height: 110px;
    box-shadow: 0rem 0rem 0rem 2px #f0f5fe;

    .text-box {
      padding: 10px;
      font-size: 14px;
      border-bottom: 0.0625rem solid #eee;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .infos {
      display: flex;
      flex-wrap: wrap;

      .order_img {
        width: 33.3%;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
      }
    }

    .order-types {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      position: relative;
      width: 100%;
      height: 60px;

      .van-tabbar {
        position: absolute;
        background: none;
        border: none !important;

        .van-tabbar-item:nth-child(2) {
          .van-tabbar-item__icon {
            margin-bottom: 0 !important;
            margin-top: 0.3125rem;

            img {
              height: 22px !important;
            }
          }

          .van-tabbar-item__text {
            margin-top: 0.5625rem;
          }
        }

        .van-tabbar-item {
          .van-tabbar-item__icon {
            margin-bottom: 0.5rem !important;

            img {
              height: 25px !important;
            }
          }
        }

        .van-tabbar-item--active {
          color: #707070 !important;
        }
      }

      [class*="van-hairline"]::after {
        border: none !important;
      }
    }
  }
}
</style>
